﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #div {
            height: 150px;
            width: 350px;
            overflow-y: scroll;
            overflow-x: hidden;
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
    <div id="div">
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
        到底端了没有？<br />
    </div>
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("div").onscroll = function () {
            var h1 = this.scrollTop;
            var h2 = this.clientHeight;
            var h3 = this.scrollHeight;
            alert(h1 + "---" + h2 + "---" + h3);
        }
    }
</script>
